import renderModal, {
    getModelValue,
    initModelValue,
    type FormModalDto
} from '@/components/modal/Modal'
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import type { AnyObject } from '@/types'
import { Component, toNative } from 'vue-facing-decorator'
import {
    type VxeColumnSlotTypes,
    type VxeGridDefines,
    type VxeGridProps,
    type VxeGridPropTypes,
    type VxeTableDataRow
} from 'vxe-table'
import { getChannelList, getOpenAccountList, getCustomList, exportCompanyInfo, getCompanyList } from '@/api/company'
import {
    BalanceTypeCnEnum,
    CompanyAuditStatusCnEnum,
    getKeyToEnum,
    ProductTypeEnum,
    ProductTypeCnEnum
} from '@/const/enum'
import {
    getDaliyInsuranceCompanyList,
    getPeriodInsuranceCompanyList
} from '@/api/insurance/company'
import { exportClientDailyAndGroup, exportClientList, exportClientPeriod, ExportLongInsuranceOrders } from '@/api/customer'
import SelectSaler from './components/SelectSaler'
import type { SaleDto } from '@/api/sale/types'
import { getSaleList } from '@/api/sale'
import { ref, h } from 'vue'
import { downloadFile } from '@/utils/util'
import type { OpenAccountDto } from '@/api/customer/types'
import router from '@/router'
import type { FilterDto } from '@/render/FilterRender'
import { addContact, editContact } from '@/api/deal'
import type { SaleReqDto } from '@/api/deal/types'
import type { CustomDto } from '@/api/company/types'
import { Button, message, Popover, Tag, Tooltip, type RadioChangeEvent } from 'ant-design-vue'
import { DownloadOutlined, MoreOutlined } from '@ant-design/icons-vue'
import dayjs from 'dayjs'
import DialogManageProduct from '../detail/components/account-info/DialogManageProduct'
import DialogRemoveCompany from './components/DialogRemoveCompany'
import { method } from 'lodash'
@Component
export class CustomListView extends TableRender {
    pageTitle = '客户管理'
    selectedUser = [] as VxeTableDataRow[]
    totalSelect = 0
    showDetail = false
    productId = 0

    curRow = {} as CustomDto

    showManageProduct = false

    showRemoveCompany = false

    salesList = [] as SaleDto[]

    filterConfig() {
        return {
            companyName: {
                name: '客户名称',
                element: 'autoComplete',
                class: 'w-full',
                optionsType: 'company'
            },
            product: {
                name: '产品类型',
                element: 'select',
                options: getKeyToEnum(ProductTypeCnEnum, false, ['日日保', '团意日保', '长期保']),
                callback: {
                    change: () => {
                        this.filters.insureCompanyType.value = ''
                    }
                }
            },
            // insureCompanyType: {
            //     // 投保导出用
            //     name: '保险公司',
            //     element: 'select',
            //     params: {
            //         defaultAttrs: {
            //             label: 'dictLabel',
            //             value: 'dictValue'
            //         }
            //     },
            //     callback: {
            //         focus: async () => {
            //             const params = this.getFilters()
            //             if (!params.product) {
            //                 message.warning('请先选择产品类型')
            //                 return
            //             }
            //             const apiList = {
            //                 1: getDaliyInsuranceCompanyList,
            //                 2: getPeriodInsuranceCompanyList,
            //                 3: getDaliyInsuranceCompanyList
            //             }
            //             const api = apiList[params.product as keyof typeof apiList]
            //             const res = await api()
            //             this.filters.insureCompanyType.options = res
            //         }
            //     }
            // },
            channelId: {
                name: '渠道账户',
                element: 'select',
                optionsType: 'channel'
            },
            balanceType: {
                name: '余额状态',
                element: 'select',
                options: getKeyToEnum(BalanceTypeCnEnum)
            },
            adminInfo: {
                name: '超管信息',
                element: 'input'
            },
            accountStatus: {
                name: '账号状态',
                element: 'select',
                value: CompanyAuditStatusCnEnum['启用'],
                options: getKeyToEnum(CompanyAuditStatusCnEnum,true, ['启用', '禁用', '解散'])
            },
            saleName: {
                name: '所属销售',
                element: 'input'
            },
            createTime: {
                name: '创建时间',
                element: 'rangePicker'
            },
            queryMonth: {
                // 投保导出用
                name: '选择月份',
                element: 'datetime',
                type: 'month',
                params: {
                    valueFormat: 'YYYY-MM'
                }
            },
            // adminPhone: {
            //     name: '超管手机号',
            //     element: 'input'
            // }
        } as FilterDto
    }

    tableConfig() {
        const config = super.tableConfig()
        return {
            ...config,
            align: 'center',
            border: 'inner',
            height: 'auto',
            rowConfig: {
                height: 90
            }
        } as VxeGridProps
    }

    saleReq = {} as SaleReqDto

    tableColumnConfigOld = () => [
        { type: 'checkbox', width: 50, fixed: 'left' },
        {
            field: 'operate',
            title: '',
            width: 50,
            filxed: 'left',
            params: {
                buttons: [
                    {
                        text: '删除',
                        type: 'danger',
                        hidden: (row) => {
                            return row.auditStatus !== CompanyAuditStatusCnEnum.解散
                        },
                        event: (row) => {
                            this.handleShowRemove(row)
                        }
                    },
                    {
                        text: '开通产品',
                        hidden: (row) => {
                            return row.auditStatus === CompanyAuditStatusCnEnum.解散
                        },
                        event: (row) => {
                            this.toNext('/customer/open-products', { companyId: row.companyId })
                        }
                    },
                    {
                        text: '充值账户',
                        hidden: (row) => {
                            return row.auditStatus === CompanyAuditStatusCnEnum.解散
                        },
                        event: (row) => {
                            this.toNext('/customer/recharge', { companyId: row.companyId })
                        }
                    },
                    {
                        text: '编辑资料',
                        hidden: (row) => {
                            return row.auditStatus === CompanyAuditStatusCnEnum.解散
                        },
                        event: (row) => {
                            this.toNext('/customer/edit-basic-info', { companyId: row.companyId })
                        }
                    },
                    {
                        text: '产品管理',
                        hidden: (row) => {
                            return row.auditStatus === CompanyAuditStatusCnEnum.解散
                        },
                        event: (row) => {
                            this.handleShowProduct(row)
                        }
                    },
                ]
            },
            slots: {
                default: 'tooltipButtons'
            }
        },
        {
            field: 'companyName',
            title: '客户名',
            width: 200,
            params: {
                path: (row) => `/customer/${row.companyId}`,
                permission: 'client:customer:detail'
            },
            slots: {
                default: 'toNext'
                // ({ row, column }: VxeColumnSlotTypes.ContentSlotParams) => {
                //     return (
                //         <div>
                //             <div class="mr-10px cursor-pointer text-blue-100" onClick={() => this.toNext('onToDetail')}>{row.companyName}</div>
                //             {/* {row.companyAbbreviation && (
                //                 <div class="mt-10px">{row.companyAbbreviation}</div>
                //             )} */}
                //         </div>
                //     )
                // }
            }
        },
        {
            field: 'phone',
            title: '超管',
            params: {
                tooltip: {
                    text: (row: CustomDto) => row.adminName,
                    content: (row: CustomDto) => row.adminPhone
                }
            },
            slots: {
                default: 'tooltip'
            }
        },
        {
            field: 'auditStatus',
            title: '账号状态',
            params: {
                colors: {
                    0: 'blue-200',
                    1: 'green',
                    2: 'orange',
                    3: 'red', 
                    4: 'black-300',
                }
            },
            formatter: ({row}) => {
                return CompanyAuditStatusCnEnum[row.auditStatus]
            },
            slots: {
                default: 'status'
            }
        },
        {
            field: 'payWage',
            title: '子弹发薪',
            slots: {
                default: ({ row, column }: VxeColumnSlotTypes.ContentSlotParams) => {
                    return this.renderItem(
                        row,
                        'isOpenPaySalary',
                        'paySurplusDays',
                        'paySaleName',
                        ProductTypeEnum.PAYWAGE
                    )
                }
            }
        },
        {
            field: 'period',
            title: '长期保',
            slots: {
                default: ({ row, column }: VxeColumnSlotTypes.ContentSlotParams) => {
                    return this.renderItem(
                        row,
                        'isOpenPeriod',
                        'periodAccountBalance',
                        'periodSaleName',
                        ProductTypeEnum.PERIOD
                    )
                }
            }
        },
        {
            field: 'daliy',
            title: '日日保',
            slots: {
                default: ({ row, column }: VxeColumnSlotTypes.ContentSlotParams) => {
                    return this.renderItem(
                        row,
                        'isOpenWesure',
                        'wesureAccountBalance',
                        'paySaleName',
                        ProductTypeEnum.DALIY
                    )
                }
            }
        },
        {
            field: 'group',
            title: '团意日保',
            slots: {
                default: ({ row, column }: VxeColumnSlotTypes.ContentSlotParams) => {
                    return this.renderItem(
                        row,
                        'isOpenTyrbStatus',
                        '',
                        'wesureSaleName',
                        ProductTypeEnum.GROUP
                    )
                }
            }
        },
        {
            field: 'eleSign',
            title: '电子签',
            slots: {
                default: ({ row, column }: VxeColumnSlotTypes.ContentSlotParams) => {
                    return this.renderItem(
                        row,
                        'isOpenEleSign',
                        'eleAccountBalance',
                        'eleSaleName',
                        ProductTypeEnum.ELESIGN
                    )
                }
            }
        },
        {
            field: 'openAnAccountTime',
            title: '开户时间',
            width: 160
        },
        // {
        //     field: 'channel',
        //     title: '渠道',
        //     slots: {
        //         default: ({ row, column }: VxeColumnSlotTypes.ContentSlotParams) => {
        //             return (
        //                 <div>
        //                     {row.channelName?.length ? (
        //                         row.channelName.map((ele: string) => {
        //                             return <div>{ele}</div>
        //                         })
        //                     ) : (
        //                         <div>--</div>
        //                     )}
        //                 </div>
        //             )
        //         }
        //     }
        // },
        // {
        //     field: 'operate',
        //     title: '操作',
        //     fixed: 'right',
        //     params: {
        //         buttons: [
        //             {
        //                 text: '查看详情',
        //                 event: (row) => this.onToDetail(row)
        //             }
        //         ]
        //     },
        //     slots: {
        //         default: 'buttons'
        //     }
        // }
    ] as TableRenderColumnTypes<CustomDto>

    // 导出保险订单
    formConfig = this.initFormConfig() as FormModalDto
    initFormConfig() {
        return {
            title: '条件选择',
            width: '450px',
            theme: 'dark',
            show: false,
            items: {
                companyId: {
                    name: '渠道来源',
                    element: 'select',
                    placeholder: '请选择渠道来源',
                    defaultValue: -1,
                    required: true,
                    params: {
                        defaultAttrs: {
                            label: 'companyName',
                            value: 'id'
                        }
                    },
                    callback: {
                        async method() {
                            const res = (await getOpenAccountList()).map((i) => {
                                return {
                                    label: i.companyName,
                                    value: i.id
                                }
                            })
                            res.unshift({
                                label: '系统',
                                value: -1
                            })
                            return res
                        },
                        change: (val: number) => {
                            // 渠道来源为非系统时 保司、渠道和所属销售隐藏
                            this.formConfig.items.insureCompanyType.hidden = val !== -1
                            this.formConfig.items.channelId.hidden = val !== -1
                            this.formConfig.items.saleId.hidden = val !== -1
                            // 渠道来源为非系统时 产品类型固定为长期保
                            if (val !== -1) {
                                this.formConfig.items.produtType.value = ProductTypeEnum.PERIOD
                            }
                            this.formConfig.items.produtType.readonly = val !== -1
                        }
                    }
                },
                produtType: {
                    name: '产品类型',
                    element: 'radioGroup',
                    placeholder: '请选择产品类型',
                    defaultValue: ProductTypeEnum.DALIY,
                    options: getKeyToEnum(ProductTypeCnEnum, false, [
                        '日日保',
                        '团意日保',
                        '长期保'
                    ]),
                    callback: {
                        change: async (ev: RadioChangeEvent) => {
                            const value = ev?.target.value
                            this.formConfig.items.insureCompanyType.value = ''
                            // 团意保时 渠道和选择月份 隐藏
                            this.formConfig.items.channelId.hidden = value === ProductTypeEnum.GROUP
                            this.formConfig.items.queryMonth.hidden = value === ProductTypeEnum.GROUP

                            // 根据产品类型不同，显示不同的保司
                            switch (value) {
                            case ProductTypeEnum.DALIY:
                            case ProductTypeEnum.GROUP:
                                this.formConfig.items.insureCompanyType.options =
                                        await getDaliyInsuranceCompanyList()
                                break
                            case ProductTypeEnum.PERIOD:
                                this.formConfig.items.insureCompanyType.options =
                                        await getPeriodInsuranceCompanyList()
                                break
                            }
                        }
                    }
                },
                insureCompanyType: {
                    name: '保司',
                    element: 'select',
                    callback: {
                        method: async () => {
                            if (this.formConfig.items.produtType.value === ProductTypeEnum.DALIY) {
                                return (await getDaliyInsuranceCompanyList()).map(i => {
                                    return {
                                        label: i.dictLabel,
                                        value: i.dictValue
                                    }
                                })
                            }
                            return []
                        }
                    }
                },
                channelId: {
                    name: '渠道',
                    element: 'select',
                    optionsType: 'channel'
                },
                queryMonth: {
                    name: '选择月份',
                    element: 'datetime',
                    type: 'month',
                    required: true,
                    params: {
                        valueFormat: 'YYYY-MM'
                    }
                },
                saleId: {
                    name: '所属销售',
                    element: 'select',
                    optionsType: 'saleList'
                }
            },
            complete: async (e) => {
                const res = await ExportLongInsuranceOrders(getModelValue(this.formConfig))
                downloadFile(res)
                this.formConfig.show = false
            },
            cancel: () => {
                this.formConfig.show = false
            },
            init: () => {
                initModelValue(this.formConfig)
            }
        } as FormModalDto
    }

    // 导出投保客户
    exportClientformConfig = this.initClientFormConfig() as FormModalDto

    initClientFormConfig() {
        return {
            title: '条件选择',
            width: '450px',
            theme: 'dark',
            show: false,
            items: {
                productType: {
                    name: '产品类型',
                    element: 'radioGroup',
                    placeholder: '请选择产品类型',
                    defaultValue: ProductTypeEnum.DALIY,
                    required: true,
                    options: getKeyToEnum(ProductTypeCnEnum, false, [
                        '日日保',
                        '团意日保',
                        '长期保'
                    ]),
                    callback: {
                        change: async (ev: RadioChangeEvent) => {
                            const value = ev?.target.value
                            this.formConfig.items.insureCompanyType.value = ''
                            // 团意保时 渠道和选择月份 隐藏
                            this.formConfig.items.channelId.hidden = value === ProductTypeEnum.GROUP
                            this.formConfig.items.queryMonth.hidden = value === ProductTypeEnum.GROUP

                            // 根据产品类型不同，显示不同的保司
                            switch (value) {
                            case ProductTypeEnum.DALIY:
                            case ProductTypeEnum.GROUP:
                                this.formConfig.items.insureCompanyType.options =
                                        await getDaliyInsuranceCompanyList()
                                break
                            case ProductTypeEnum.PERIOD:
                                this.formConfig.items.insureCompanyType.options =
                                        await getPeriodInsuranceCompanyList()
                                break
                            }
                        }
                    }
                },
                insureCompanyType: {
                    name: '保司',
                    element: 'select',
                    callback: {
                        method: async () => {
                            if (this.formConfig.items.produtType.value === ProductTypeEnum.DALIY) {
                                return (await getDaliyInsuranceCompanyList()).map(i => {
                                    return {
                                        label: i.dictLabel,
                                        value: i.dictValue
                                    }
                                })
                            }
                            return []
                        }
                    }
                },
                queryMonth: {
                    name: '选择月份',
                    element: 'datetime',
                    type: 'month',
                    params: {
                        valueFormat: 'YYYY-MM'
                    }
                },
            },
            complete: async (e) => {
                const data = getModelValue(this.exportClientformConfig)
                let res = ''
                switch(data.productType) {
                case ProductTypeEnum.DALIY:
                case ProductTypeEnum.GROUP:
                    res = await exportClientDailyAndGroup(data)
                    break
                case ProductTypeEnum.PERIOD:
                    res = await exportClientPeriod(data)
                    break
                }
                res && downloadFile(res)
                this.exportClientformConfig.show = false
            },
            cancel: () => {
                this.exportClientformConfig.show = false
            },
            init: () => {
                initModelValue(this.exportClientformConfig)
            }
        } as FormModalDto
    }

    handleShowProduct(row: CustomDto) {
        this.curRow = row
        this.showManageProduct = true
    }

    handleShowRemove(row: CustomDto) {
        this.curRow = row
        this.showRemoveCompany = true
    }

    toNext(url: string, query?: AnyObject) {
        this.$router.push({
            path: url,
            query
        })
    }

    /**
     * 获取销售人员列表
     *
     * 异步调用 getSaleList 方法获取销售员列表，并将结果赋值给 salesList 响应式变量
     */
    async getSalerList() {
        const res = await getSaleList()
        this.salesList = res
    }

    /**
     * 销售员变更处理函数
     *
     * @param newSalerId 新销售员ID
     * @param row 当前行数据
     * @param productType 产品类型，支持的类型有:
     *        - ProductTypeEnum.PAYWAGE: 子弹发薪
     *        - ProductTypeEnum.PERIOD: 长期保
     *        - ProductTypeEnum.DALIY: 日日保
     *        - ProductTypeEnum.GROUP: 团意日保
     *        - ProductTypeEnum.ELESIGN: 电子签
     */
    async onSalerChange(
        newSalerId: number,
        row: VxeTableDataRow,
        productType:
            | ProductTypeEnum.PAYWAGE
            | ProductTypeEnum.PERIOD
            | ProductTypeEnum.DALIY
            | ProductTypeEnum.GROUP
            | ProductTypeEnum.ELESIGN
    ) {
        this.saleReq.companyId = row.companyId
        this.saleReq.serviceStartTime = dayjs().startOf('month').format('YYYY-MM-DD')
        this.saleReq.productType = productType
        this.saleReq.saleId = newSalerId
        switch (productType) {
        case ProductTypeEnum.PAYWAGE: // 子弹发薪
            this.saleReq.id = row.payDealId
            this.saleReq.saleOldId = row.paySaleId
            break
        case ProductTypeEnum.PERIOD: // 长期保
            this.saleReq.id = row.periodDetailId
            this.saleReq.saleOldId = row.periodSaleId
            break
        case ProductTypeEnum.DALIY: // 日日保
            this.saleReq.id = row.wesureDealId
            this.saleReq.saleOldId = row.wesureSaleId
            break
        case ProductTypeEnum.GROUP: // 团意日保
            this.saleReq.id = row.tyxDealId
            this.saleReq.saleOldId = row.tyxSaleId
            break
        case ProductTypeEnum.ELESIGN: // 团意日保
            this.saleReq.id = row.eleDealId
            this.saleReq.saleOldId = row.eleSaleId
            break
        }
        if (!this.saleReq.saleOldId) {
            // 新增商务
            await addContact(this.saleReq)
        } else {
            // 修改商务
            await editContact(this.saleReq)
        }
        this.reloadPage()
    }

    onCheckboxChange(row: VxeGridDefines.CheckboxChangeEventParams) {
        this.selectedUser = this.ref.getCheckboxRecords()
        this.totalSelect = this.selectedUser.length
    }

    onCheckboxAll(row: VxeGridDefines.CheckboxChangeEventParams) {
        this.selectedUser = this.ref.getCheckboxRecords()
        this.totalSelect = this.selectedUser.length
    }

    /**
     * 导出公司信息
     *
     * @returns 无返回值
     */
    async onExportCompany() {
        if (!this.selectedUser.length) {
            message.warning('请先选择要导出的公司')
            return
        }
        const selectedIds = this.selectedUser.map((i) => i.companyId)
        const res = await exportCompanyInfo({
            ids: selectedIds.join(',')
        })
        downloadFile(res)
    }

    // 导出投保客户
    async onShowExportClient() {
        this.exportClientformConfig.show = true
    }

    async onExportCustomerInfo() {
        if (!this.filters?.insureCompanyType?.value) {
            message.error('请选择保司')
            return
        }
        const res = await exportClientList({
            queryMonth: this.filters?.queryMonth?.value as string,
            insureCompanyType: this.filters?.insureCompanyType?.value as string,
            companyId: this.filters?.companyId?.value as number
        })
        downloadFile(res)
    }

    // 导出保险订单
    onShowExportInsuranceOrders() {
        this.formConfig.show = true
    }

    onToDetail(row: VxeTableDataRow) {
        router.push({
            path: `/customer/${row.companyId}`
        })
    }

    onLoadData(page: number, size: number, filters: AnyObject) {
        filters.isOpenWesure = filters.product === ProductTypeEnum.DALIY ? 1 : ''
        filters.isOpenTyrbStatus = filters.product === ProductTypeEnum.GROUP ? 1 : ''
        filters.isOpenPeriod = filters.product === ProductTypeEnum.PERIOD ? 1 : ''
        filters.isOpenPaySalary = filters.product === ProductTypeEnum.PAYWAGE ? 1 : ''
        filters.isOpenEleSign = filters.product === ProductTypeEnum.ELESIGN ? 1 : ''

        filters.startTime = filters.createTime?.[0] || ''
        filters.endTime = filters.createTime?.[1] || ''
        delete filters.createTime

        return getCustomList({
            pageNum: page,
            pageSize: size,
            ...filters
        })
    }

    async created() {
        await this.getSalerList()
    }

    // 渲染item数据
    renderItem(
        row: VxeTableDataRow,
        type:
            | 'isOpenPaySalary'
            | 'isOpenPeriod'
            | 'isOpenWesure'
            | 'isOpenTyrbStatus'
            | 'isOpenEleSign',
        prop:
            | ''
            | 'paySurplusDays'
            | 'periodAccountBalance'
            | 'wesureAccountBalance'
            | 'wesureSaleName'
            | 'eleAccountBalance',
        name: 'paySaleName' | 'periodSaleName' | 'wesureSaleName' | 'eleSaleName',
        productType:
            | ProductTypeEnum.PAYWAGE
            | ProductTypeEnum.PERIOD
            | ProductTypeEnum.DALIY
            | ProductTypeEnum.GROUP
            | ProductTypeEnum.ELESIGN
    ) {
        return row[type] === 1 ? (
            <div class="flex flex-col items-center">
                {/* {type === 'isOpenPaySalary' ? (
                    <div class="mb-10px">剩余{row.paySurplusDays}天</div>
                ) : (
                    prop && <div>¥{row[prop]}</div>
                )} */}
                {/* {(type === 'isOpenPeriod' || type === 'isOpenWesure') && */}
                <div>已开通</div>
                {this.renderCustomInSystemStatus(row)}
                <SelectSaler
                    name={row[name]}
                    salesList={this.salesList}
                    onSalerChange={(id: number) => this.onSalerChange(id, row, productType)}
                />
            </div>
        ) : (
            <>{this.renderNoData(row, type !== 'isOpenPaySalary')}</>
        )
    }

    // 未开通黑名单的显示
    renderNoData(row: VxeTableDataRow, isShowBlackList: boolean = true) {
        return (
            <div>
                <div>未开通</div>
                {isShowBlackList && this.renderInBlackList(row)}
                <div>--</div>
            </div>
        )
    }

    // 拉黑的显示
    renderInBlackList(row: VxeTableDataRow) {
        return (
            <>
                {row.insureBlackList ? (
                    <Tag class="ml-8px" color="default">
                        <span class="text-black">拉黑</span>
                    </Tag>
                ) : (
                    <></>
                )}
            </>
        )
    }

    // 客户在系统的状态
    renderCustomInSystemStatus(row: VxeTableDataRow) {
        return (
            <div class="flex gap-4px">
                {this.renderInBlackList(row)}
                {row.periodInsureStatus?.refusalGuaranteeStatus ? (
                    <Tag color="error">
                        拒保
                    </Tag>
                ) : (
                    <></>
                )}
                {row.periodInsureStatus?.blockedAccount ? (
                    <Tag color="error">
                        冻结
                    </Tag>
                ) : (
                    <></>
                )}
                {row.periodInsureStatus?.antiDatedPolicy ? (
                    <Tag color="error">
                        倒投保
                    </Tag>
                ) : (
                    <></>
                )}
            </div>
        )
    }

    renderStatistics() {
        return <div></div>
    }

    render() {
        return (
            <>
                {super.render()}
                {renderModal(this.formConfig)}
                {renderModal(this.exportClientformConfig)}
                {
                    <DialogManageProduct
                        v-model:show={this.showManageProduct}
                        companyId={this.curRow.companyId}
                        onRefresh={this.reloadPage}
                    />
                }
                {
                    <DialogRemoveCompany
                        v-model:show={this.showRemoveCompany}
                        companyId={this.curRow.companyId}
                        companyName={this.curRow.companyName}
                        onRefresh={this.reloadPage}
                    />
                }
            </>
        )
    }
}

export default toNative(CustomListView)
